<template>
  <div v-if="total > 0">
    <el-row class="tags" :gutter="10" :style="'--tags-colNumber: ' + props.colNumber">
      <el-col class="tags-item"
              :xs="6"
              :sm="4"
              :md="2"
              :lg="24 / props.colNumber"
              v-for="(item,index) in data"
              :key="index"
              :style="size - (index + 1) < props.colNumber && !props.isPage ? 'margin-bottom: 0' : ''">
        <el-tooltip effect="dark" :content="item.tagName" placement="top">
          <nuxt-link class="tags-tag" :to="'/classify/all?tag=' + item.id">
            <el-tag :round="props.round" :class="'text-center overflow_omit ' + tagClass[index]">
              {{ item.tagName }}
            </el-tag>
          </nuxt-link>
        </el-tooltip>
      </el-col>
    </el-row>
    <el-pagination
        v-if="props.isPage"
        small
        background
        layout="prev, pager, next"
        :total="Number(total)"
        class="pagination"
        :page-size="props.size"
        :pager-count="5"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
  <Empty v-else />
</template>

<script setup lang="ts">
import {Tag} from "@/entity/tag";
import {Response} from "~/entity/response";

const props = defineProps({
  round: {
    type: Boolean,
    default: true
  },
  colNumber: {
    type: Number,
    default: 3
  },
  size: {
    type: Number,
    default: 21
  },
  isPage: {
    type: Boolean,
    default: false
  },
  list: {
    type: Array,
    default: []
  }
});
const tagClass = ref<string[]>(["tag-gray", "tag-red", "tag-red-2", "tag-yellow", "tag-yellow-2", "tag-blue", "tag-blue-2", "tag-cyan", "tag-green", "tag-green-2", "tag-purple", "tag-purple-2"]);
const tag = ref<Tag>();
const data = ref<Tag[]>([]);
const total = ref<number>(0);
const pageSize = ref(props.size);
const pageNum = ref(1);
const {tagApi} = useApi();
onBeforeMount(() => {
  if (props.list.length < 1) {
    getTagList();
  } else {
    data.value = props.list as Tag[];
    total.value = props.list.length;
    synchronization();
  }
});
const getTagList = () => {
  tagApi.getList({
    pageSize: pageSize.value,
    pageNum: pageNum.value
  }, tag.value).then((res: any) => {
    const {rows, total: sum}: Response = res;
    data.value = rows || [];
    total.value = sum || 0;
    synchronization();
  });
}
//标签样式同步标签的数量
const synchronization = () => {
  for (let i = 0; i < data.value.length; i++) {
    //打乱排序
    tagClass.value = shuffle(tagClass.value);
    let index = data.value.length - tagClass.value.length;
    for (let j = 0; j < index; j++) {
      tagClass.value.push(tagClass.value[j]);
    }
  }
};
//数组随机排序
const shuffle = (arr: string[]) => {
  let i = arr.length;
  while (i) {
    let j = Math.floor(Math.random() * i--);
    [arr[j], arr[i]] = [arr[i], arr[j]];
  }
  return arr;
}
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  getTagList();
}
const handleCurrentChange = (val: number) => {
  pageNum.value = val;
  getTagList();
}
</script>

<style scoped lang="scss">
.tags {
  .tags-item {
    margin-bottom: 10px;
  }

  .tags-tag {
    display: inline-block;
    width: 100%;
    font-size: 12px;

    span {
      display: inline-block;
      line-height: 24px;
    }
  }
}

.pagination {
  justify-content: center;
}
</style>